<template>
  <loading v-if="loading"/>
  <el-container
    v-else
    direction="vertical">

    <el-header style="border-bottom:1px solid #efefef;box-sizing: initial;">

      <el-dropdown class="user bg-color" @command="system" style="float:right;" trigger="click">
        <span class="el-dropdown-link">
          {{$session.name}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown"  style="margin-top:-5px;width:120px;">
          <el-dropdown-item class="user-item">设置</el-dropdown-item>
          <el-dropdown-item class="user-item">关于</el-dropdown-item>
          <el-dropdown-item class="user-item" command="quit" divided>退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-menu style="display:inline-block;float:right;margin-right:50px;"  :router="true" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">处理中心</el-menu-item>
        <el-submenu index="2">
          <template slot="title">我的工作台</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-submenu>
        <el-menu-item index="/setup">系统管理</el-menu-item>
      </el-menu>



    </el-header>
    <el-main style="padding:0;">
      <router-view/>
    </el-main>



  </el-container>

</template>

<script>

  import Loading from '@/components/system/Loading'
  import axios from "@/util/axios";

  export default {

    components: { Loading },

    data(){
      return {
        loading: true
      }

    },

    beforeMount(){
      if(this.$auth.isLoaded()){
        this.loading = false
      }
    },

    mounted(){
      this.$auth.load(()=>{
        axios.get('/api/v1/sys/session')
        .then(({data}) => {
          setTimeout( ()=> this.loading = false,100 )
          for(const i in data){
            this.$set(this.$session,i,data[i]);
          }
        });
      });
    },

    methods: {
      handleSelect(){
      },

      quit(){
        localStorage.removeItem('____x_a');
        axios.post('/api/v1/sys/quit')
        .then(()=> this.$router.push('/login'));
      },

      system(cmd){
        if(cmd){
          this[cmd]();
        }
      }
    }
  }
</script>

<style>

  .user{
    height: 60px;
    line-height: 60px;
    cursor: pointer;
  }

</style>
